<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户验证</title>
    <style>
        #createCode {
            cursor: context-menu;
        }
    </style>

</head>

<body>
    <div id="box">
        <p>
            <label for="user">用户名</label>
            <input type="text" id="user">
            <span id="userSpan"></span>
        </p>
        <p>
            <label for="pwd">密&emsp;码</label>
            <input type="password" id="pwd">
            <span id="pwdSpan"></span>
        </p>
        <p>
            <label for="repwd">确&emsp;认</label>
            <input type="password" id="repwd">
            <span id="repwdSpan"></span>
        </p>
        <p>
            <label for="phone">手机号</label>
            <input type="text" id="phone">
            <span id="phoneSpan"></span>
        </p>
        <p>
            <label for="mail">邮&emsp;箱</label>
            <input type="text" id="mail">
            <span id="mailSpan"></span>
        </p>
        <p>
            <label for="code">验证码</label>
            <input type="text" id="code">
            <span id="createCode">qwrt</span>
            <span id="codeSpan"></span>
        </p>
        <p><input type="submit" id="btn" value="注册" disabled></p>
    </div>
</body>
<script>
    var userIpt = document.getElementById("user");
    var userSpan = document.getElementById("userSpan");
    var pwdIpt = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwdSpan");
    var repwdIpt = document.getElementById("repwd");
    var repwdSpan = document.getElementById("repwdSpan");
    var codeIpt = document.getElementById("code");
    var createCode = document.getElementById("createCode");
    var codeSpan = document.getElementById("codeSpan");
    var btn = document.getElementById("btn");
    var phoneIpt = document.getElementById("phone");
    var phoneSpan = document.getElementById("phoneSpan");
    var mailIpt = document.getElementById("mail");
    var mailSpan = document.getElementById("mailSpan");
    console.log(user, userSpan, pwd, pwdSpan, repwd, repwdSpan, code, createCode, codeSpan, btn);

    var isUserOk;
    var isPwdOk;
    var isRePwdOk;
    var isPhoneOk;
    var isMailOk;
    var isCodeOk;
    // 用户名
    userIpt.oninput = function () {
        isUserOk = false;
        userSpan.style.fontSize = "12px";
        userSpan.style.color = "red";
        // var reg = /^[a-zA-Z_][\w]{5,11}$/;
        var reg1 = /^.{6,12}$/;
        var reg2 = /^\D/;
        var reg3 = /^\w{5,11}$/;
        var str = userIpt.value;
        // console.log(str,reg1.test(str));
        if (!(reg1.test(str))) {
            userSpan.innerText = "用户名需要在6-12位之间";
        } else if (!(reg2.test(str))) {
            userSpan.innerText = "用户名不能以数字开头";
        } else if (!(reg3.test(str))) {
            userSpan.innerText = "用户名由数字大小写字母下划线组成";
        } else {
            userSpan.innerText = "√";
            userSpan.style.color = "green";
            isUserOk = true;
        }
        isDisabled();
    }

    // 密码
    pwdIpt.oninput = function () {
        isPwdOk = false;
        pwdSpan.style.fontSize = "12px";
        pwdSpan.style.color = "red";
        var reg1 = /^.{6,12}$/;
        var reg2 = /^\w{6,12}$/;
        var str = pwdIpt.value;

        var maxReg = /[A-Z]/;
        var minReg = /[a-z]/;
        var numReg = /[0-9]/;
        var charReg = /_/;
        var flag1 = false, flag2 = false, flag3 = false, flag4 = false;

        if (maxReg.test(str)) flag1 = true;
        if (minReg.test(str)) flag2 = true;
        if (numReg.test(str)) flag3 = true;
        if (charReg.test(str)) flag4 = true;

        var sum = flag1 + flag2 + flag3 + flag4;

        if (!(reg1.test(str))) {
            pwdSpan.innerText = "用户名需要在6-12位之间";
        } else if (!(reg2.test(str))) {
            pwdSpan.innerText = "密码由数字大小写字母下划线组成";
        } else {
            switch (sum) {
                case 1:
                    pwdSpan.innerText = "密码强度:弱";
                    pwdSpan.style.color = "orange";
                    break;
                case 2:
                    pwdSpan.innerText = "密码强度:中";
                    pwdSpan.style.color = "greenyellow";
                    break;
                case 3:
                    pwdSpan.innerText = "密码强度:强";
                    pwdSpan.style.color = "palegreen";
                    break;
                case 4:
                    pwdSpan.innerText = "密码强度超强";
                    pwdSpan.style.color = "green";
                    break;
            }
            isPwdOk = true;
        }
        isDisabled();
    }

    //确认密码
    repwdIpt.oninput = function () {
        isRePwdOk = false;
        if (pwdIpt.value == repwdIpt.value) {
            repwdSpan.innerText = "√";
            repwdSpan.style.color = "green";
            isRePwdOk = true;
        } else {
            repwdSpan.innerText = "密码不一致";
            repwdSpan.style.fontSize = "12px";
            repwdSpan.style.color = "red";
        }
        isDisabled();
    }

    //手机号
    phoneIpt.oninput = function () {
        isPhoneOk = false;
        var reg = /^1[3-9]\d{9}$/;
        var phone = phoneIpt.value;
        if (reg.test(phone)) {
            phoneSpan.innerText = "√";
            phoneSpan.style.color = "green";
            isPhoneOk = true;
        } else {
            phoneSpan.innerText = "手机的格式不对";
            phoneSpan.style.fontSize = "12px";
            phoneSpan.style.color = "red";
            
        }
        isDisabled();
    }

    // 邮箱号
    mailIpt.oninput = function () {
        isMailOk = false;
        var reg = /^\w{6,20}@\w{2,10}(\.com|\.cn|\.email)$/;
        var mail = mailIpt.value;
        if (reg.test(mail)) {
            mailSpan.innerText = "√";
            mailSpan.style.color = "green";
            isMailOk = true;
        } else {
            mailSpan.innerText = "邮箱的格式不对";
            mailSpan.style.fontSize = "12px";
            mailSpan.style.color = "red";
            
        }
        isDisabled();
    }

    //验证码
    codeIpt.oninput = function () {
        isCodeOk = false;
        var codeReg = new RegExp(`^${createCode.innerText}$`, "i");
        // console.log(codeReg.test(codeIpt.value));
        // createCode.innerText != codeIpt.value
        if (!codeReg.test(codeIpt.value)) {
            codeSpan.innerText = "验证码不对";
            codeSpan.style.fontSize = "12px";
            codeSpan.style.color = "red";
        } else {
            codeSpan.innerText = "√";
            codeSpan.style.color = "green";
            isCodeOk = true;
        }
        isDisabled();
    }

    btn.onclick = function () {
        if (isUserOk && isPwdOk && isRePwdOk && isPhoneOk && isMailOk && isCodeOk) {
            alert("注册成功！");
        }
        console.log(1);
    }

    function isDisabled() {
        btn.disabled = (isUserOk && isPwdOk && isPhoneOk && isMailOk && isCodeOk) ? false : true;
        console.log("判断", isUserOk, isPwdOk,isRePwdOk, isPhoneOk, isMailOk, isCodeOk);
        // if (isUserOk && isPwdOk && isRePwdOk && isPhoneOk && isMailOk && isCodeOk) {
        //     btn.disabled = false;
        // } else {
        //     btn.disabled = true;
        // }
    }



    //验证码
    createCode.innerText = myRandom();
    createCode.onclick = function () {
        createCode.innerText = myRandom();
    }

    //随机验证码
    function myRandom() {
        var list = chars();
        var arr = [];
        var j;
        while (true) {
            j = Math.round(Math.random() * (list.length - 4));
            if (arr.indexOf(list[j]) == -1) {
                arr.push(list[j]);
            }
            if (arr.length == 4) break;
        }
        return arr.join("");
    }

    //3.获取数字数组
    function numList() {
        var numList = [];
        for (var i = 48; i <= 57; i++) {
            var char = String.fromCharCode(i); //根据编码返回对应的字符
            numList.push(char);
        }
        return numList;
    }

    //4.获取大写字母数组
    function maxList() {
        var maxList = [];
        for (var i = 65; i <= 90; i++) {
            var char = String.fromCharCode(i); //根据编码返回对应的字符
            maxList.push(char);
        }
        return maxList;
    }

    //5.获取小写字母数组
    function minList() {
        var minList = [];
        for (var i = 97; i <= 122; i++) {
            var char = String.fromCharCode(i); //根据编码返回对应的字符
            minList.push(char);
        }
        return minList;
    }

    //7.获取大小写数字
    function chars() {
        var chars = numList().concat(maxList(), minList());
        return chars;
    }
</script>


</html>